<script>
import axios from 'axios';
import { MessagePlugin } from 'tdesign-vue-next';
const baseUrl = import.meta.env.VITE_APP_API_BASE_URL
console.log("####" + baseUrl)

export default {
  data() {
    return {
      title: "添加我的建议分享",
      message: '',

      selectSchool: '',
      popupVisibleSchool: false,
      selectMajor: '',
      popupVisibleMajor: false,
      selectDegree: '',
      popupVisibleDegree: false,
      selectWorkexp: '',
      popupVisibleWorkexp: false,


      schools: [],
      majors: [],
      degrees: [],
      workexps: [],

      formData: {
        school: '',
        major: '',
        degree: '',
        work_exp: '',
        content: ''
      },

      rules: {
        school: [{ required: true, message: '学校必填', type: 'error' }],
        major: [{ required: true, message: '专业必填', type: 'error' }],
        degree: [{ required: true, message: '最高学历必填', type: 'error' }],
        work_exp: [{ required: true, message: '工作经验必填', type: 'error' }],
        content: [{ required: true, message: '专业建议必填', type: 'error' }]
      }
    }
  },

  methods: {
    submitForm({ validateResult, firstError }) {
      // console.log("submitForm")
      console.log(this.formData)
      if (firstError != "") {
        MessagePlugin.warning(firstError);
      }
      if (validateResult === true) {
        const url = baseUrl + '/advice/addAdvice'
        
        
        axios.post(url, this.formData).then( res => {
          console.log('Response:', res.data);
          if (res.data.code == "200") {
            console.log(res.data.text)
            this.message = res.data.text
          }
          MessagePlugin.success('提交成功');

        }).catch(err => {
          console.log("err:", err)
          MessagePlugin.error('递交失败:'+err);

        })
        this.$router.push('/')
      }
    },


    //学校下拉
    onInputChangeSchool(val, content) {
      //console.log(val, content)
      this.getCategroySelect(val, '学校')
    },
    onOptionClickSchool(o) {
      //console.log(school)
      this.selectSchool = o.tagname;
      // 选中后立即关闭浮层
      this.popupVisibleSchool = false;

      //选中后赋予值
      this.formData.school = o.tagname;

    },
    onPopupVisibleChangeSchool(val, content) {
      this.popupVisibleSchool = val;
    },


    //专业下啦
    onInputChangeMajor(val, content) {
      //console.log(val, content)
      this.getCategroySelect(val, '专业')
    },
    onOptionClickMajor(o) {
      this.selectMajor = o.tagname;
      // 选中后立即关闭浮层
      this.popupVisibleMajor = false;

      //选中后赋予值
      this.formData.major = o.tagname;

    },
    onPopupVisibleChangeMajor(val, content) {
      this.popupVisibleMajor = val;
    },


    //学历下拉
    onInputChangeDegree(val, content) {
      //console.log(val, content)
      this.getCategroySelect(val, '最高学历')
    },
    onOptionClickDegree(o) {
      this.selectDegree = o.tagname;
      // 选中后立即关闭浮层
      this.popupVisibleDegree = false;
      //选中后赋予值
      this.formData.degree = o.tagname;

    },
    onPopupVisibleChangeDegree(val, content) {
      this.popupVisibleDegree = val;
    },



    //工作经验拉
    onInputChangeWorkexp(val, content) {
      //console.log(val, content)
      this.getCategroySelect(val, '工作经验')
    },
    onOptionClickWorkexp(o) {
      //console.log(school)
      this.selectWorkexp = o.tagname;
      // 选中后立即关闭浮层
      this.popupVisibleWorkexp = false;

      //选中后赋予值
      this.formData.work_exp = o.tagname;
    },
    onPopupVisibleChangeWorkexp(val, content) {
      this.popupVisibleWorkexp = val;
    },


    getCategroySelect(key, categroy) {
      var that = this
      let url = baseUrl + '/advice/get/categroySelect'
      if (categroy !== null && categroy !== undefined && categroy !== '') {
        url = url + "?categroy=" + categroy
      }
      if (key !== null && key !== undefined && key !== '') {
        url = url + "&key=" + key
      }

      console.log(url)

      axios.get(url).then(res => {
        console.log('Response:', res.data);
        if (res.data.code == "200") {

          if (categroy == '学校') {
            that.schools = res.data.data
          }
          if (categroy == "专业") {
            that.majors = res.data.data
          }
          if (categroy == "最高学历") {
            that.degrees = res.data.data
          }
          if (categroy = "工作经验") {
            that.workexps = res.data.data

          }
        }
      }).catch(err => {
        console.log("err:", err)
      })
    },

  },


  created() {
    this.getCategroySelect('', '学校')
    this.getCategroySelect('', '专业')
    this.getCategroySelect('', '最高学历')
    this.getCategroySelect('', '工作经验')


  }
}
</script>

<template>
  <t-layout>
    <t-space direction="vertical" size="md" class="p-4">
      <t-form ref="form" :data="formData" reset-type="initial" :rules="rules" colon @reset="onReset" @submit="submitForm">
        <h1 class="text-xl p-4 font-bold mb-4 text-gray-900">{{ title }}</h1>

        <t-form-item label="学校名称(*)" name="school">
          <!-- <t-input v-model="formData.school"></t-input> -->
          <t-select-input :value="selectSchool" :popup-visible="popupVisibleSchool" v-model="formData.school" panel="暂无数据"
            placeholder="请输入学校名称" allowInput @input-change="onInputChangeSchool"
            @popup-visible-change="onPopupVisibleChangeSchool">
            <template #panel>
              <ul class="tdesign-demo__select-input-ul-single">
                <li v-for="(school, index) in schools" :key="index" @click="() => onOptionClickSchool(school)">
                  {{ school.tagname }}
                </li>
              </ul>
            </template>
          </t-select-input>
        </t-form-item>



        <t-form-item label="专业名称(*)" name="major">
          <t-select-input :value="selectMajor" :popup-visible="popupVisibleMajor" v-model="formData.major" panel="暂无数据"
            placeholder="请输入专业名称" allowInput @input-change="onInputChangeMajor"
            @popup-visible-change="onPopupVisibleChangeMajor">
            <template #panel>
              <ul class="tdesign-demo__select-input-ul-single">
                <li v-for="(major, index) in majors" :key="index" @click="() => onOptionClickMajor(major)">
                  {{ major.tagname }}
                </li>
              </ul>
            </template>
          </t-select-input>
        </t-form-item>



        <t-form-item label="最高学历(*)" name="degree">
          <t-select-input :value="selectDegree" :popup-visible="popupVisibleDegree" v-model="formData.degree" panel="暂无数据"
            placeholder="请输入最高学历名称" allowInput @input-change="onInputChangeDegree"
            @popup-visible-change="onPopupVisibleChangeDegree">
            <template #panel>
              <ul class="tdesign-demo__select-input-ul-single">
                <li v-for="(degree, index) in degrees" :key="index" @click="() => onOptionClickDegree(degree)">
                  {{ degree.tagname }}
                </li>
              </ul>
            </template>
          </t-select-input>
        </t-form-item>


        <t-form-item label="工作经验(*)" name="work_exp">
          <t-select-input :value="selectWorkexp" :popup-visible="popupVisibleWorkexp" v-model="formData.work_exp"
            panel="暂无数据" placeholder="请输入工作经验" allowInput @input-change="onInputChangeWorkexp"
            @popup-visible-change="onPopupVisibleChangeWorkexp">
            <template #panel>
              <ul class="tdesign-demo__select-input-ul-single">
                <li v-for="(workexp, index) in workexps" :key="index" @click="() => onOptionClickWorkexp(workexp)">
                  {{ workexp.tagname }}
                </li>
              </ul>
            </template>
          </t-select-input>
        </t-form-item>


        <t-form-item label="专业建议" name="content">
          <t-textarea v-model="formData.content" placeholder="填写你的建议" clearable />
        </t-form-item>

        <div class="flex flex-row justify-end gap-x-8">
          <t-button type="reset" shape="rectangle" variant="outline">重置</t-button>

          <t-button type="submit" theme="primary">提交</t-button>
          <!-- <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-500 w-32">提交</button>
      <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-50 w-32">重置</button> -->
        </div>
      </t-form>

    </t-space>
  </t-layout>
</template>
